<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>格式化vue文件工具</title>
	</head>
	<link rel="stylesheet" href="render/public/render.css">
	<script src="render/compile/vue-template-compile.js"></script>
	<script src="render/utils/computedTemplate.js"></script>
	<script src="render/forMat/forMatChildren.js"></script>
	<script src="render/forMat/forMatEvents.js"></script>
	<script src="render/forMat/forMatImportStr.js"></script>
	<script src="render/forMat/forMatMethods.js"></script>
	<script src="render/forMat/forMatPageMeta.js"></script>
	<script src="render/forMat/forMatStyle.js"></script>
	<script src="render/forMat/forMatViewModel.js"></script>
	<script src="render/forMat/forMatWatch.js"></script>
	<script src="render/forMat/forMatVueToDesignJson.js"></script>
	<script src="render/utils/finallyForMatPageJson.js"></script>
	<script src="render/public/businessRender.js"></script>
	<body>

		<div class="renderContent">
			<div class="fileContent">
				<div class="uploadBtn">
					<button class="cssButtons-io w-100" id="uploadFileBtn">
						<span
							><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
								<path d="M0 0h24v24H0z" fill="none"></path>
								<path
									d="M24 12l-5.657 5.657-1.414-1.414L21.172 12l-4.243-4.243 1.414-1.414L24 12zM2.828 12l4.243 4.243-1.414 1.414L0 12l5.657-5.657L7.07 7.757 2.828 12zm6.96 9H7.66l6.552-18h2.128L9.788 21z"
									fill="currentColor"
								></path>
							</svg>
							文件上传叭~</span
						>
					</button>
				</div>

				<div class="vsCodeCard">
					<div class="wrap">
						<div class="terminal">
							<hgroup class="head">
								<p class="title">
									<svg
										width="16px"
										height="16px"
										aria-hidden="true"
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 24 24"
										stroke-linejoin="round"
										stroke-linecap="round"
										stroke-width="2"
										stroke="currentColor"
										fill="none"
									>
										<path
											d="M7 15L10 12L7 9M13 15H17M7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21Z"
										></path>
									</svg>
									老高说：
								</p>
				
								<button class="copy_toggle" tabindex="-1" type="button">
									<svg
										width="16px"
										height="16px"
										aria-hidden="true"
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 24 24"
										stroke-linejoin="round"
										stroke-linecap="round"
										stroke-width="2"
										stroke="currentColor"
										fill="none"
									>
										<path
											d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"
										></path>
										<path
											d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"
										></path>
									</svg>
								</button>
							</hgroup>
				
							<div class="body">
								<pre class="pre">          <code>-&nbsp;</code>
									<code>有事儿?&nbsp;</code>
									<code class="cmd" data-cmd="别找我!vueYYDS,一个能打的都没有"></code>
								</pre>
							</div>
						</div>
					</div>
				</div>


				<div class="uploadFileList" id="uploadFileList">
					<!-- <div class="line"><div>xxxx.vue文件1</div><div class="reload">x</div></div>
					<div class="line"><div>xxxx.vue文件2</div><div class="reload">x</div></div>
					<div class="line"><div>xxxx.vue文件3</div><div class="reload">x</div></div>
					<div class="line"><div>xxxx.vue文件4</div><div class="reload">x</div></div>
					<div class="line"><div>xxxx.vue文件5</div><div class="reload">x</div></div>
					<div class="line"><div>xxxx.vue文件6</div><div class="reload">x</div></div> -->
				</div>
			</div>

			<div class="pageJsonPreview">
				<div class="tips">
					<div class="text">1. 仅支持js+vue2.0的项目转换;</div>
					<div class="text">2. data中声明的属性不要挂载未在当前页面声明的变量 </div>
					<div class="text">3. 不可以使用计算属性;</div>
					<div class="text">4. 监听只能监听视图模型中声明的变量;</div>
					<div class="text">5. 不支持将低代码生成的携带模型视图的vue文件进行转换;</div>
					<div class="text">6. props传参只支持【number, string, boolean】,默认会被转换成字符串。</div> 
				</div>
				<div class="title">
					<button class="cssButtons-io" id="copyJson">
						<span>复制JSON</span>
					</button>
				</div>
				<div class="pageJsonPre">
					<div class="lowCodeCard">
						<div class="header">
							<div class="top">
								<div class="circle">
									<span class="red circle2"></span>
								</div>
								<div class="circle">
									<span class="yellow circle2"></span>
								</div>
								<div class="circle">
									<span class="green circle2"></span>
								</div>
								<div class="codeTitle">
									<p id="title2"></p>
								</div>
							</div>
						</div>
						<div class="code-container">
							<pre class="area" id="code" name="code" readonly=""></pre>
						</div>
					</div>
					
				</div>
			</div>
		</div>

	</body>
</html>